<template>
  <div>
    <el-card class="box-card">
      <h3>{{isEdit?'编辑':'新增'}}</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径">
          <el-input v-model="ruleForm.href"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="ruleForm.parentId" placeholder="请选择上级菜单">
            <el-option :value="-1" label="无上级菜单"></el-option>
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述"  prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="前端图标"  prop="icon">
          <el-input v-model="ruleForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="ruleForm.shown">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="ruleForm.orderNum"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button v-if="!isEdit" @click="resetForm()">重置</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { Form } from 'element-ui'
import Vue from 'vue'
import { DataArray, getEditMenuInfo, getMenuNodeList, saveOrUpdate } from '@/services/menu'
// interface rulesForm{
//   id:number
//   parentId: number
//   name: string
//   href: string
//   description: string
//   icon: string
//   shown: boolean
//   orderNum: number
// }

export default Vue.extend({
  name: 'addMenu',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    id: {
      type: String
    }
  },
  data () {
    return {
      ruleForm: {
        parentId: -1, // -1 没上级菜单,只有-1的可以添加菜单
        name: '',
        href: '',
        description: '',
        icon: '',
        shown: false,
        orderNum: 0
      },
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请输入前端图标', trigger: 'blur' }
        ]
      },
      optionsList: []
      // topSelect: ''
    }
  },
  methods: {
    // 添加菜单内的请求
    async handlerCreate () {
      const { data } = await getMenuNodeList()
      if (data.code !== '000000') {
        return this.$message.error('获取上级菜单列表失败')
      }
      (data.data as DataArray[]).forEach((item:DataArray) => (this.optionsList as DataArray[]).push(item))
      // this.topSelect = (this.optionsList[0] as DataArray).name
    },
    // 编辑菜单的请求
    async handlerEdit () {
      if (this.isEdit && this.id) {
        const { data } = await getEditMenuInfo(Number.parseInt(this.id))
        // console.log('编辑数据', data)
        this.ruleForm = data.data.menuInfo
        this.optionsList = data.data.parentMenuList
      }
    },
    // 提交表单
    async submitForm () {
      await (this.$refs.ruleForm as Form).validate()
      // console.log('要提交的数据', this.ruleForm)

      this.$confirm('此操作将添加一项菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // let form = null
        // if (this.isEdit) {
        // 不用处理了，有id
        // const copyForm:rulesForm = Object.assign({ id: -1 }, this.ruleForm)
        // copyForm.id = Number.parseInt(this.id)
        // console.log('此时的数据', this.ruleForm)
        //   form = this.ruleForm
        // } else {
        //   form = this.ruleForm
        // }
        const { data } = await saveOrUpdate(this.ruleForm)
        if (data.code === '000000') {
          this.$message.success('添加成功')
          this.$router.push({ name: 'menu' })
        }
      }).catch(() => {
        this.$message.error('添加失败，请重试')
      })
    },
    // 重置表单
    resetForm () {
      (this.$refs.ruleForm as Form).resetFields()
    }

    // handleRadio (val:boolean) {
    //   this.ruleForm.shown = val
    // },
    // handleSelect (val:number) {
    //   const arr:DataArray[] = this.optionsList.filter((item:DataArray) => item.id === val)
    //   this.ruleForm.parentId = (arr[0] as DataArray).parentId
    // }

  },
  created () {
    this.isEdit
      ? this.handlerEdit()
      : this.handlerCreate()
  }

})
</script>

<style lang="scss" scoped>
.demo-ruleForm{
  padding:2rem;
}
</style>
